<template>
<div class="app-container" style="background:#F1F1F1">
  <el-row :gutter="15">
    <el-col :span="6"><el-card  shadow="hover" class="box-card">
    	<svg-icon icon-class="peoples" style="color:#00A6F7;" class="card-panel-icon" />
      <div class="tit">注册人数</div>
      <count-to :start-val="0" :end-val="1200" :duration="1000" class="num" />
    </el-card></el-col>
    <el-col :span="6"><el-card  shadow="hover" class="box-card">
    	<svg-icon icon-class="message" style="color:#00CAB2" class="card-panel-icon" />
      <div class="tit">评论总数</div>
      <count-to :start-val="0" :end-val="1500" :duration="1000" class="num" />     
    </el-card></el-col>
    <el-col :span="6"><el-card  shadow="hover" class="box-card">
    	<svg-icon icon-class="form" style="color:#FF4161" class="card-panel-icon" />
      <div class="tit">资讯总数</div>
      <count-to :start-val="0" :end-val="1800" :duration="1000" class="num" />     
    </el-card></el-col>
    <el-col :span="6"><el-card  shadow="hover" class="box-card">
    	<svg-icon icon-class="shopping" style="color:#34C447;" class="card-panel-icon" />
      <div class="tit">订单总数</div>
      <count-to :start-val="0" :end-val="10" :duration="1000" class="num" />     
    </el-card></el-col>
  </el-row>
  <el-card  class="char-line">		
 		<div ref="abc" :style="{height:height,width:width}" class="chart"></div>
  </el-card>
  <el-row :gutter="20"> 
    <el-col :span="12">
      <el-card class="char-line">
      	<div ref="abcd" :style="{height:height,width:width}" class="chart"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
    	<el-card class="char-line">
    		<div ref="pie"  :style="{height:height,width:width}" class="chart"></div>
    	</el-card>
    </el-col>
    </el-row>    		
</div>
</template>

<script>
import CountTo from 'vue-count-to'
const animationDuration = 1000
import echarts from 'echarts'
require('echarts/theme/macarons') 
import resize from './mixins/resize'
export default {
  mixins: [resize],	
  components: {CountTo},	
  data() {
    return {
      width:'100%',
      height:'350px'			
		}
  },
  mounted(){
		this.chart = echarts.init(this.$refs.abc, 'macarons');
		var data = {expectedData: [100, 120, 161, 134, 105, 160, 165],actualData: [120, 82, 91, 154, 162, 140, 145]}
		this.setOptions(data)		
		
		
		
		
		
		
		
		
    this.chart3 = echarts.init(this.$refs.pie, 'macarons')

   this.chart3.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
        },
        series: [
          {
            name: 'WEEKLY WRITE ARTICLES',
            type: 'pie',
            //roseType: 'radius',
            radius: [80, 100],
            //center: ['50%', '38%'],
            data: [
              { value: 320, name: 'Industries' },
              { value: 240, name: 'Technology' },
              { value: 149, name: 'Forex' },
              { value: 100, name: 'Gold' },
              { value: 59, name: 'Forecasts' }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })





	 
   this.chart2 = echarts.init(this.$refs.abcd, 'macarons');
   this.chart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: 'pageA',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [79, 52, 200, 334, 390, 330, 220],
          animationDuration
        }, {
          name: 'pageB',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [80, 52, 200, 334, 390, 330, 220],
          animationDuration
        }, {
          name: 'pageC',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [30, 52, 200, 334, 390, 330, 220],
          animationDuration
        }]
      })	
	},
  methods: {
		setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual']
        },
        series: [{
          name: 'expected', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration,
          animationEasing: 'cubicInOut'
        },
        {
          name: 'actual',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: actualData,
          animationDuration,
          animationEasing: 'quadraticOut'
        }]
      })
    },
	}
}
</script>
<style scoped>
.box-card{ height:110px; border-radius:0; margin-bottom:20px; }
.card-panel-icon{ float:left; font-size:55px; margin:5px 20px 0 10px; vertical-align:middle;}
.tit{ font-size:20px; color:#666666; font-weight:bold; padding-bottom:2px; padding-top:9px;}
.num{ font-family:Georgia, "Times New Roman", Times, serif;  color:#999;font-size:22px;}
.char-line{ border-radius:0; margin-bottom:20px;}
</style>